﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*#box1 {
            width: 300px;
            height: 300px;
            background-color: pink;
        }*/
    </style>
</head>
<body>
    <input type="button" name="name" value="点我" />
    <div id="box"></div>
    <div id="box1"></div>
    <script>
        //document.write('Hello <p>World<p/>');
        btn = document.querySelector('input');
        btn.onclick = function () {
            div = document.querySelector('#box');
            datas = ['通过', '元素集', '根据', '子节点'];
            array = [];
            array.push('<ul>');
            for (var i = 0; i < datas.length; ++i) {
                console.log(i);
                array.push('<li>' + datas[i] + '</li>');
            }
            array.push('</ul>');
            div.innerHTML = array.join('');
        }

        var p = document.createElement('p');
        p.innerText = 'hello';
        p.style.color = 'red';

        var div = document.querySelector('#box1');
        div.appendChild(p);
        
    </script>
</body>
</html>